import React, { useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../store';
import { fetchVersions } from '../store/versionsSlice';
import {
  Box,
  Typography,
  Button,
  Card,
  CardContent,
  Grid,
  Chip,
  CircularProgress,
} from '@mui/material';
import VersionStatus from './VersionStatus';

const ProjectDetail: React.FC = () => {
  const { projectId } = useParams<{ projectId: string }>();
  const navigate = useNavigate();
  const dispatch = useDispatch<AppDispatch>();

  const project = useSelector((state: RootState) =>
    state.projects.items.find(p => p.id === Number(projectId))
  );

  const { items: versions, status } = useSelector(
    (state: RootState) => state.versions
  );

  useEffect(() => {
    if (projectId) {
      dispatch(fetchVersions(Number(projectId)));
    }
  }, [dispatch, projectId]);

  if (!project) {
    return (
      <Typography color="error" align="center">
        Project not found
      </Typography>
    );
  }

  if (status === 'loading') {
    return (
      <Box display="flex" justifyContent="center" mt={4}>
        <CircularProgress />
      </Box>
    );
  }

  return (
    <Box>
      <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
        <Typography variant="h4">{project.name}</Typography>
        <Button
          variant="contained"
          color="primary"
          onClick={() => navigate(`/projects/${project.id}/versions/new`)}
        >
          Create Version
        </Button>
      </Box>

      <Card sx={{ mb: 4 }}>
        <CardContent>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <Typography color="textSecondary">Bundle ID</Typography>
              <Typography variant="h6">{project.bundle_id}</Typography>
            </Grid>
            <Grid item xs={12} sm={6}>
              <Typography color="textSecondary">Apple ID Username</Typography>
              <Typography variant="h6">{project.username}</Typography>
            </Grid>
          </Grid>
        </CardContent>
      </Card>

      <Typography variant="h5" gutterBottom>
        Versions
      </Typography>

      <Grid container spacing={3}>
        {versions.map((version) => (
          <Grid item xs={12} key={version.id}>
            <Card>
              <CardContent>
                <Box display="flex" justifyContent="space-between" alignItems="center">
                  <Typography variant="h6">
                    Version {version.version_number}
                  </Typography>
                  <Chip
                    label={version.status}
                    color={
                      version.status === 'success'
                        ? 'success'
                        : version.status === 'failed'
                        ? 'error'
                        : 'default'
                    }
                  />
                </Box>
                <VersionStatus version={version} />
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default ProjectDetail;
